<%@ include file="/WEB-INF/jsp/common.jsp"%>


<title>Login to MySchool</title>

<script type="text/javascript">
	function assignOP(opValue) {
		document.forms[0].openIdProvider.value = opValue;
		document.forms[0].submit();

	}

	function showNewAccountDiv() {

		document.getElementById('loginContent');
		document.getElementById('newAccount');

	}
</script>

</head>
<body>

	<div id="login-content" style="display: block;" align="center">

		<div align="center">

			<h2>Login</h2>

			<form:form action="login.htm" method="post" cssClass="openid"
				name="loginForm" modelAttribute="User" id="loginFormId">

				<input type="hidden" name="openIdProvider" value="na" />


				<div>
					<ul class="providers">
						<li class="direct" title="Google"><img
							src="images/googleW.png" alt="icon"
							onclick="javascript:assignOP('Google');" /><span>https://www.google.com/accounts/o8/id</span>
						</li>
						<li class="direct" title="Yahoo"><img src="images/yahooW.png"
							alt="icon" onclick="javascript:assignOP('Yahoo');" /><span>http://yahoo.com/</span>
						</li>
						<li class="direct" title="facebook"><img
							src="images/facebookW.png" alt="icon"
							onclick="javascript:assignOP('Facebook');" /><span>http://facebook.com/</span>
						</li>
					</ul>
				</div>
				<br>OR
               <fieldset>

					<div>
						<form:input path="username" />
					</div>
					<br>
					<div>
						<form:password path="password" />
						<input type="submit" name="Submit" value="Submit" id="loginSubmit" />
					</div>
				</fieldset>
				<a href="javascript:showNewAccountDiv();">Create account now.</a>
			</form:form>


			<br />

			<script type="text/javascript">
				$(function() {
					$("form.openid:eq(0)").openid();
				});
			</script>

		</div>



		<div id="newAccount" style="display: none;">
			<form:form action="createUser.htm">
				<fieldset>

					<div>
						User Name: <input type="text" name="username" />

					</div>
					<br>
					<div>
						Password: <input type="password" name="password" />

					</div>
					<div>
						Email: <input type="text" name="address.contact.email" />

					</div>
					<div>
						Contact No: <input type="text" name="address.contact.cell" />
					</div>

					<input type="submit" name="Submit" value="Submit" id="loginSubmit" />
				</fieldset>
				<a href="javascript:showNewAccountDiv();">Create account now.</a>
			</form:form>

		</div>

	</div>
	<script type="text/javascript">
		jQuery.fn.exists = function() {
			return jQuery(this).length > 0;
		}
		if ($('#login-content').exists()) {
			border.render('login-content');
		}
	</script>
	<!-- all dialogs and popups go here -->
	<!-- background div to hide the screen -->
	<div id="backgroundPopup"></div>
</body>
</html>